<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* body{
            background: url(five.png) no-repeat;
            background-size: 100%;
        } */
        ul,li,p{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 100%;
        }
       
        .container .ul{
            display: flex;
            flex-wrap: wrap;
        }
        .container .ull{
            display: flex;
            flex-wrap: wrap;
        }
        .container .ul li,.content .ull li{
            width: 12%;
            text-align: center;
            line-height: 40px;
            border: 3px solid #eee;   
            background: rgba(0,0,0,0.5);

            color:white;
            margin: 10px;
        }
       
        .container .ul li img,.content .ull li img{
            width: 30%;
            height: auto;
        }
        .container .ul .active{
            font-size: 25px;
            font-weight: 600;
            background: rgba(255,255,255,0.5);

            border: 3px solid #eee;
            /* background: red; */
        }
        #btn{
            width: 150px;
            height: 50px;
            display: block;
            margin: 0 auto;
            border: none;
            background: green;
            color:white;
            font-size: 20px;
            font-weight: 600
        }
        .H1{
            text-align: center
        }
    </style>
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/browser.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function ran(min,max){
				return parseInt(Math.random()*(max-min+1)+min)
        }
        const Style={
            active:{fontSize: "30px",fontWeight: "600",color:"red"},
        }
        class Candidate extends React.Component{
            constructor(props){
                super(props)

            }
            click(){
                var cb = this.props.callBack(this.props.index);
            }
            render(){
                return (<li  className={this.props.class}>
                            <img src={this.props.img}/>
                            <p>{this.props.name}</p>
                    
                    <span  onClick={this.click.bind(this)}> X</span>
            
                </li>)
            }
        }
        class APP extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    num:[
                        {name:"张志阳",imgurl:"./img/张志阳.jpg"},
                        {name:"尹彪彪",imgurl:"./img/张志阳.jpg"},
                        {name:"王永豪",imgurl:"./img/王永豪.jpg"},
                        {name:"谢忠宁",imgurl:"./img/谢忠宁.jpg"},
                        {name:"程然",imgurl:"./img/程然.jpg"},
                        {name:"申柯",imgurl:"./img/张志阳.jpg"},
                        {name:"郭振男",imgurl:"./img/郭振男.jpg"},
                        {name:"梁蓓研",imgurl:"./img/张志阳.jpg"},
                        {name:"姜晓航",imgurl:"./img/姜晓航.jpg"},
                        {name:"赵勃斌",imgurl:"./img/赵勃斌.jpg"},
                        {name:"张金龙",imgurl:"./img/张金龙.jpg"},
                        {name:"杨骐鸣",imgurl:"./img/杨骐鸣.jpg"},
                        {name:"向博",imgurl:"./img/张志阳.jpg"},
                        {name:"刘学雷",imgurl:"./img/刘学雷.jpg"},
                        {name:"黄友君",imgurl:"./img/黄友君.jpg"},
                        {name:"弓嗣荣",imgurl:"./img/弓嗣荣.jpg"},
                        {name:"李梦雪",imgurl:"./img/李梦雪.jpg"},
                        {name:"檀清华",imgurl:"./img/檀清华.jpg"},
                        {name:"许金豪",imgurl:"./img/许金豪.jpg"},
                        {name:"郭峰军",imgurl:"./img/郭峰军.jpg"},
                        {name:"倪聪",imgurl:"./img/张志阳.jpg"},
                        {name:"王迪",imgurl:"./img/王迪.jpg"},
                        {name:"屈娇秀",imgurl:"./img/屈娇秀.jpg"},
                        {name:"朱恬恬",imgurl:"./img/朱恬恬.jpg"},
                        {name:"徐朝阳",imgurl:"./img/徐朝阳.jpg"},
                        {name:"李佳豪",imgurl:"./img/张志阳.jpg"},
                        {name:"段秉君",imgurl:"./img/段秉君.jpg"},
                        {name:"范俊丹",imgurl:"./img/张志阳.jpg"},
                        {name:"张业博",imgurl:"./img/张志阳.jpg"},
                        {name:"盖鑫鑫",imgurl:"./img/盖鑫鑫.jpg"},
                        {name:"刘瑞",imgurl:"./img/刘瑞.jpg"},
                        {name:"鲁明文",imgurl:"./img/张志阳.jpg"},
                        {name:"朱增光",imgurl:"./img/朱增光.jpg"},
                        {name:"王曼",imgurl:"./img/王曼.jpg"},
                        {name:"王晓东",imgurl:"./img/王晓东.jpg"},
                        {name:"李俊杰",imgurl:"./img/李俊杰.jpg"},
                        {name:"赵胜杰",imgurl:"./img/赵胜杰.jpg"},
                        {name:"柳旭",imgurl:"./img/柳旭.jpg"},
                        {name:"张明凯",imgurl:"./img/张明凯.jpg"},
                        {name:"吕艳琴",imgurl:"./img/吕艳琴.jpg"},
                        {name:"刘世奇",imgurl:"./img/刘世奇.jpg"},
                        {name:"张艳强",imgurl:"./img/张志阳.jpg"}
                    ],
                    numtwo:[],
                    name:"en",
                    titme:null,
                    selectIndex:null,
                    isLike:false,
                    winners:[]
                }
                this.delFunc = this.delFunc.bind(this);

            }
            componentDidMount(){
                let students = this.state.num;

                 students = students.map( (st,index) => {
                    return <Candidate callBack={this.delFunc}  index={index}  key={index}  name={st.name} img={st.imgurl} class="item" />
                })

                this.setState({
                    numtwo:students
                })
            }
           
            
            delFunc(index){
                    console.log('del:',index)

                    var students = this.state.num;
                    students.splice(index,1);
                    students = students.map( (st,index) => {
                        return <Candidate  callBack={this.delFunc} index={index}  key={index}  name={st.name} img={st.imgurl}  class="item" />
                    })

                    this.setState({
                        numtwo:students
                    })
                    
            }
             // 添加名字
            add(){
                var myname = this.refs.iptname.value;
                if(myname){
                    let students = this.state.num;
                    console.log(students.includes(myname))
                    let msg = {name:myname,imgurl:""}
                    if(!students.includes(msg.name)){
                        students.push(msg);
                    }else{
                        alert("添加过了")
                    }
                    let renderStu = students.map( (st,index) => {
                        return <Candidate callBack={this.delFunc} index={index} key={index}  name={st.name} img={st.imgurl}  class="item" />
                    })
                    this.setState({
                        students:students,
                        numtwo:renderStu
                    })
                    this.refs.iptname.value = ""
                }
            }
            // 开始滚动
            start(){
                var sam=0
                var titme=setInterval(()=>{
                    sam++
                    // let ran=ran(0,this.state.num.length-1)
                    var ran = Math.floor(Math.random()*this.state.num.length);
                    let stu=this.state.num.map((st,index)=>{
                        if(ran==index){
                            this.setState({
                                selectIndex:index
                            })
                            return <Candidate callBack={this.delFunc} index={index} key={index}  name={st.name} img={st.imgurl}  class="active" />
                        }else{
                            return <Candidate callBack={this.delFunc} index={index} key={index}  name={st.name} img={st.imgurl}  class="" />
                        }
                    })
                    this.setState({
                        numtwo:stu
                    })
                    if(sam==20){
                        var index = this.state.selectIndex;
                        var students = this.state.num;
                        var winner = students[index]
                        var winners = this.state.winners;

                        students.splice(index,1);
                        winners.push(winner);
                        this.setState({
                            winners:winners,
                            students:students
                        })

                        clearInterval(titme)

                    }
                },100)
                this.setState({
                    titme:titme
                })
            }
            render(){
                let winner = this.state.winners;
                winner = winner.map( (w,i) =>{
                    return (<li key={i}>
                            <img src={w.imgurl}/>
                            <p>{w.name}</p>
                        </li>) 
                })
                return (
                    <div>
                        <div>
                            <input ref="iptname" />
                            <button onClick={this.add.bind(this)}> 添加 </button>
                        </div>
                        <div className="container">
                            <ul className="ul">{this.state.numtwo}</ul>
                            <button id="btn" onClick={this.start.bind(this)}> 开始 </button>      
                        </div>
                        <div className="content">
                            <h1 className="H1">被选召的孩子们！！！</h1>
                            <ul className="ull">
                                        {winner}
                            </ul>
                        </div>
                        
                    </div>
                )        
            }
        }
        
        ReactDOM.render(<APP/>,document.getElementById("root"))

    </script>
</body>
</html>